import React, { Component } from 'react'
import { getUrlParam } from '../../utils/tools'
import sty from './index.module.scss'
import { getQRCodeActivityDetails } from '../../utils/interface'
import './quill.snow.css'
import './quill.bubble.css'
import './quill.core.css'
import Loading from '../../comm/loading'
import distance from '../../static/locla.png'
class CollectCoupons extends Component {
  constructor(props) {
    super(props)
    this.state = {
      content: '',
      banner: '',
      color: '',
      couponList: [],
      loadingState: true,
    }
  }
  render() {
    return (
      <div className={sty.wrap} style={{ background: this.state.color }}>
        <Loading loadingState={this.state.loadingState} />
        <img className={sty.banner} src={this.state.banner} alt="" />
        {this.state.couponList.map((item, index) => {
          return (
            <div className={sty.box} key={index}>
              <div
                className={sty.left}
                style={{ background: this.state.color }}
              ></div>
              <div
                className={sty.right}
                style={{ background: this.state.color }}
              ></div>
              <div className={sty.topitem}>
                <div className={sty.newpeople}>
                  <div className={sty.c1}>
                    <span className={sty.c2}>
                      {item.c.couponName}*{item.n}
                    </span>
                    {/* <span className={sty.c3}>红包</span> */}
                  </div>
                  <span className={sty.money}>￥{item.c.preAmount}</span>
                </div>
                <div
                  className={sty.time}
                  style={{ justifyContent: item.c.timeOut ? '' : 'flex-end' }}
                >
                  {item.c.timeOut ? <span>有效期至{item.c.timeOut}</span> : ''}
                  <span>
                    满{item.c.minimumAmount}元可用
                  </span>
                </div>
              </div>
              <div className={sty.bottomitem}>
                {/* ,
                  {item.c.superposition == '1' ? '可叠加' : '不可叠加'} */}
                <span>
                  仅限<i className={sty.c4}> {item.c.productName}{item.c.payValue}</i>使用
                </span>
                <div className={sty.bottom2} onClick={() => this.goMap(item)}>
                  <img src={distance} alt="" />
                  <span>导航去油站</span>
                </div>
              </div>
            </div>
          )
        })}
        {/* <div className={sty.coupoinNum}>
                    {this.state.couponList.map((item, index) => {
                        return (
                            <div key={index}>
                                <p>{item.c.couponName}</p>
                                <p>*{item.n}</p>
                            </div>

                        )
                    })}
                    <p></p>
                </div> */}
        <button className={sty.btn} onClick={this.couponInfo.bind(this)}>
          我的优惠券
        </button>
        <div
          className={sty.content}
          className="ql-editor"
          dangerouslySetInnerHTML={{ __html: this.state.content }}
        />
      </div>
    )
  }
  componentDidMount() {
    window.wx.miniProgram.postMessage({ data: { form: 3 } })
    getQRCodeActivityDetails({
      activityId: getUrlParam('activityId'),
      memberId: getUrlParam('memberId'),
    }).then((res) => {
      console.log(res, '优惠')
      if (res.data.status == 500) {
        alert(res.data.message)
      }
      if (res.data.status == 200 || res.data.status == 500) {
        let arr = this.arrCheck(res.data.result.couponDTOList)
        arr.map(item=>{
          if (item.c.payType){
            item.c.payList = item.c.payType.split(",")
            item.c.payValue = ""
            let len = item.c.payList.length
            item.c.payList.map((i,d)=>{
              item.c.payValue+=this.matchPayType(i)+(d===len-1?'':',')
            })
          }
        })
        this.setState({
          banner: res.data.result.imgUrlDetails,
          content: res.data.result.content,
          color: res.data.result.backgroundColor,
          couponList: arr,
        })
      } else {
        alert(res.data.message)
        // window.wx.miniProgram.navigateBack()
      }
      this.setState({
        loadingState: false,
      })
    })
  }
  arrCheck(arr) {
    console.log(arr)
    var newArr = []
    let arr2 = JSON.parse(JSON.stringify(arr))
    for (var i = 0; i < arr.length; i++) {
      var temp = arr[i]
      var count = 0
      for (var j = 0; j < arr2.length; j++) {
        if (arr2[j].id == temp.id) {
          count++
          arr2[j].id = -1
        }
      }
      console.log(temp)
      if (temp.id != -1 && count > 0) {
        temp.preAmount = temp.preAmount / 100
        temp.minimumAmount = temp.minimumAmount / 100

        newArr.push({ c: temp, n: count })
      }
    }
    return newArr
  }
  matchPayType(key){
    let arr = [
      {key:1,value:"支付宝"},
      {key:2,value:"微信"},
      {key:3,value:"银联"},
      {key:4,value:"余额"},
      {key:5,value:"现金"},
      {key:6,value:"一网通"}
    ]
    let value = ""
  
    var i=0;
    for(i=0;i<arr.length;i++){
      if(arr[i].key==key){
        value = arr[i].value
        break;
      }
    }
    return value
    
  }
  couponInfo() {
    window.wx.miniProgram.navigateTo({
      url: '/pages/couponcard/couponcard',
    })
  }
  goMap(e) {
    if (e.c.couponStoreDTOList && e.c.couponStoreDTOList.length) {
      if (e.c.couponStoreDTOList.length === 1) {
        window.wx.miniProgram.navigateTo({
          url: '/pages/map/map?lat='+e.c.couponStoreDTOList[0].lat+'&lot='+e.c.couponStoreDTOList[0].lot,
        })
      }else{
        this.props.history.push('/couponStationList?couponId='+e.c.id+"&memberId="+getUrlParam("memberId")+"&lat="+getUrlParam("lat")+"&lot="+getUrlParam("lot"))
      }
    }
  }
  format(shijianchuo) {
    //shijianchuo是整数，否则要parseInt转换
    function add0(m) {
      return m < 10 ? '0' + m : m
    }

    var time = new Date(shijianchuo)
    var y = time.getFullYear()
    var m = time.getMonth() + 1
    var d = time.getDate()
    var h = time.getHours()
    var mm = time.getMinutes()
    var s = time.getSeconds()
    return (
      y +
      '-' +
      add0(m) +
      '-' +
      add0(d) +
      ' ' +
      add0(h) +
      ':' +
      add0(mm) +
      ':' +
      add0(s)
    )
  }
}

export default CollectCoupons
